<template>
  <div class="yxp-scene-pop" v-if="isModel">
    <div class="content-modal-pop">
      <div class="content-main">
        <div class="close" id="yxp-commp-back9" @click="handleClose"></div>
        <h3 class="title">【标准模型】</h3>
        <div class="detail">
          <p>
            <template>
                  <template v-if="articleType === 1 || articleType === 5">
                    <!-- <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span> -->
                    <template v-for="(item,i) in enWord">
                      <span :key="'z' + i"  v-if="i === 0" :style="{display: 'block',color: '#333', 'text-align': 'left'}" v-html="item.word"></span>
                      <span :key="'z' + i"  v-if="i > 0 && i < enWord.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                      <span :key="'z' + i"  v-if="i === enWord.length - 1" :style="{float: 'right',overflow: 'hidden'}" v-html="item.word"></span>
                    </template>
                    <!-- <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden'}"></span> -->
                  </template>
                  <template v-else-if="articleType === 2">
                    <template v-for="(item,i) in enWord">
                      <span :key="'z' + i"  v-if="i === 0" :style="{display: 'block','text-align': 'center',color: '#333'}" v-html="item.word"></span>
                      <span :key="'z' + i"  v-if="i > 0 && i < enWord.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                      <span :key="'z' + i"  v-if="i === enWord.length - 1" :style="{float: 'right',overflow: 'hidden'}" v-html="item.word"></span>
                    </template>
                  </template>
                  <template v-else-if="articleType === 3">
                    <template v-for="(item,i) in enWord">
                      <span :key="'z' + i"  v-if="i === 0" :style="{display: 'block','text-align': 'center',color: '#333'}" v-html="item.word"></span>
                      <span :key="'z' + i"  v-if="i > 0 && i < enWord.length" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                    </template>
                  </template>
                  <template v-else-if="articleType === 4">
                    <template v-for="(item,i) in enWord">
                      <span :key="'z' + i"  v-if="i === 0" :style="{display: 'block','text-align': 'left',color: '#333'}" v-html="item.word"></span>
                      <span :key="'z' + i"  v-if="i > 0 && i < enWord.length" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                    
                    </template>
                  </template>
                  <template v-else>
                    <template v-for="(item,i) in enWord">
                      <span :key="'z' + i"  :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                    </template>
                  </template>
                </template>
            </p>
        </div>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'model',
  props: {
    enWord: {
      type: Array
      // default: function () {}
    },
    isModel: {
      type: Boolean,
      default: false
    },
    articleType: {
      type: Number,
      default:0
    },
    // enHead: {
    //   type: String,
    //   default: ''
    // },
    // enEnd: {
    //   type: String,
    //   default: ''
    // }
  },
  mounted () {
    console.log(this.enWord)
  },
  methods: {
    handleClose () {
      this.$emit('model', false)
    }
  }
}
</script>
<style lang='less' scoped>
/**弹窗 */
  .yxp-scene-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 800px;
    height: 90%;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1200;
    .content-modal-pop {
      height: calc(100% - 60px);
      overflow: auto;
      margin-right: 10px;
      margin-top: 48px;
      &-main {
        padding-left: 50px;
        padding-right: 40px;
        padding-bottom: 48px;
      }
    }
    .close {
      position: absolute;
      right: 20px;
      top:20px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
    .detail {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        text-align: left;
        margin-top: 20px;
        padding: 0 30px;
      }
  }
</style>
